<template>
    <div>
      <div class="right-title">
        <span>信息完善</span>
      </div>
      <div class="right-content2">
        <el-form :inline="true" :model="userRegister" status-icon :rules="rules" ref="userRegister" label-width="100px" class="demo-ruleForm">
          <div class="box" style="height: 135px;width: 100%;">
            <el-upload
                class="avatar-uploader"
                action="http://106.13.120.182:8087/user/uploadInfo"
                :headers="headers"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageShow" :src="userRegister.imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <el-upload
                class="upload-demo"
                action="http://106.13.120.182:8087/user/uploadInfo"
                :headers="headers"
                :on-change="handleChange"
                :file-list="fileList"
                accept=".docx">
                <el-button size="small" type="primary">上传简历</el-button>
                <div slot="tip" class="el-upload__tip">只能上传.docx文件</div>
            </el-upload>
          </div>
          <el-form-item label="姓名" prop="userName">
            <el-input v-model="userRegister.userName" readonly></el-input>
          </el-form-item>
          <el-form-item label="学号" prop="userId">
            <el-input v-model="userRegister.userId" readonly></el-input>
          </el-form-item>
          <el-form-item label="年龄" prop="userAge">
            <el-input v-model="userRegister.userAge"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="userGender">
            <el-radio-group v-model="userRegister.userGender" prop="userGender">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <br>
          <el-form-item label="学院" prop="userAcademy">
            <el-input v-model="userRegister.userAcademy"></el-input>
          </el-form-item>
          <el-form-item label="专业" prop="userMajor">
            <el-input v-model="userRegister.userMajor"></el-input>
          </el-form-item>
          <el-form-item label="班级" prop="userClass">
            <el-input v-model="userRegister.userClass"></el-input>
          </el-form-item>
          <el-form-item label="家乡" prop="userCity">
            <el-input v-model="userRegister.userCity"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="userPhone">
            <el-input v-model="userRegister.userPhone"></el-input>
          </el-form-item>
          <el-form-item label="进入年份" prop="startYear">
            <el-select v-model="userRegister.startYear" placeholder="请选择进入年份">
              <el-option label="2021" value="2021"></el-option>
              <el-option label="2020" value="2020"></el-option>
              <el-option label="2019" value="2019"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="E-mail" prop="userEmail" >
            <el-input v-model="userRegister.userEmail" readonly></el-input>
          </el-form-item>
          <el-form-item label="部门" prop="userDirection">
            <el-select v-model="userRegister.userDirection" placeholder="请选择部门">
              <el-option label="CPU" value="CPU"></el-option>
              <el-option label="操作系统" value="操作系统"></el-option>
              <el-option label="人工智能" value="人工智能"></el-option>
            </el-select>
          </el-form-item>
          <div class="button-group">
            <el-button type="primary" @click="UpdateInfo('userRegister')">修改</el-button>
            <el-button @click="resetForm('userRegister')">重置</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </template>
  
  <script>
  import config from '../../action/config.js';

  export default {
    name:"selfInformation",
  
    data() {
      // var checkAge = (rule, value, callback) => {
      //     if (!Number.isInteger(value)) {
      //       callback(new Error('请输入数字值'));
      //     } else {
      //       if (value < 18) {
      //         callback(new Error('必须年满18岁'));
      //       } else {
      //         callback();
      //       }
      //     }
      // };
      return{
        imageShow:'',
        userId: localStorage.getItem('userId'),
        fileList: [{
          name: '吴一波简历.docx',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        },{
          name: '李国瑞简历.docx',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }],
        userRegister: {
          imageUrl: '',
          startYear:'',
          userDirection:'',
          userEmail:'',
          userGender:'',
          userId:'',
          userName:'',
          userAge:'',
          userAcademy: "",
          userMajor: "",
          userClass: "",
          userCity: "",
          userPhone: "",
        },
        rules: {
          userName:[
            { required: true, message: '请输入姓名！', trigger: 'blur'}
          ],
          userId: [
            { required: true, message: '请输入学号！', trigger: 'blur' },
            { min: 10, max: 10, message: '长度为10个字符', trigger: 'blur' }
          ],
          userPassword: [
            { required: true, message: '请输入密码！', trigger: 'blur'}
          ],
          userAge: [
            { required: true, message: '请输入年龄！', trigger: 'blur'}
          ],
          userPhone: [
            { min: 11, max: 11, message: '长度为11个数字', trigger: 'blur' }
          ],
          startYear:[
            { required: true, message: '请选择进入年份！', trigger: 'blur'}
          ],
          userDirection:[
            { required: true, message: '请选择方向！', trigger: 'blur'}
          ],
          userGender:[
            { required: true, message: '请选择性别！', trigger: 'blur'}
          ],
          userEmail:[
            { required: true, message: '请输入邮箱地址!', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址!', trigger: ['blur', 'change'] }
          ],
          userMajor:[],
          userAcademy:[],
          userClass:[],
          userCity:[],
        }
      };
    },
    computed: {
      headers() {
        return {'ORDER_ACCESS_TOKEN':localStorage.getItem('token')};
      }
    },
    methods:{
      // config(){
      //   return {'ORDER_ACCESS_TOKEN':localStorage.getItem('token')};
      // },
      // uploadAvatar(){
      //   this.$axios.$post(config.api.post.User.uploadInfo,{headers:{ORDER_ACCESS_TOKEN:localStorage.getItem('token')}})
      //     .then((response)=>{
      //       this.userRegister.imageUrl = response.data;
      //   });
      // },
      handleAvatarSuccess(res, file) {
        this.imageShow = true;
        this.userRegister.imageUrl = URL.createObjectURL(file.raw);
        // this.$forceUpdate();
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      handleChange(file, fileList) {
        this.fileList = fileList.slice(-3);
      },
      showUserInfo(){
        let params={
          userId: localStorage.getItem('userId'),
        }
        console.log(this.userId);
        this.$axios.$get(config.api.get.User.showUserInfo,{headers:{ORDER_ACCESS_TOKEN:localStorage.getItem('token')},params:params})
          .then((response)=>{
            console.log(this.userId);
            this.userRegister = response.data;
            console.log(this.userId);
          });
      },
      UpdateInfo(formName){
        let params={
          startYear:this.userRegister.startYear,
          userDirection:this.userRegister.userDirection,
          userEmail:this.userRegister.userEmail,
          userGender:this.userRegister.userGender,
          userId:this.userRegister.userId,
          userName:this.userRegister.userName,
          userPassword:this.userRegister.userPassword,
          userAcademy: this.userRegister.userAcademy,
          userAge: this.userRegister.userAge,
          userCity: this.userRegister.userCity,
          userClass: this.userRegister.userClass,
          userMajor: this.userRegister.userMajor,
          userPhone: this.userRegister.userPhone,
        }
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios.$post(config.api.post.User.UpdateInfo,params,{headers:{ORDER_ACCESS_TOKEN:localStorage.getItem('token')}})
              .then((response)=>{
                this.UpdateInfo = response.data;
                if(response.code == 0){
                  console.log("修改成功");
                  this.$message({
                    message: '修改成功！',
                    type: 'success'
                  });
                }else if(response.code == -1){
                  console.log("修改失败");
                  this.$message.error(response.message);
                }
              });
          }else {
            this.$message.error("信息输入有误或为空！");
            return false;
          }
        });
        this.$axios.$post(config.api.post.User.UpdateInfo,params,{headers:{ORDER_ACCESS_TOKEN:localStorage.getItem('token')}})
            .then((response)=>{

            });
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('提交成功!');
          } else {
            console.log('提交失败!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.formName.imageUrl = '';
      }
    },
    mounted(){
      this.showUserInfo();
    }
  }
  </script>
  <style>
    .right-title{
      height: 60px;
      width: 100%;
      background-color: #4880d3;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      box-shadow: 2px 2px 2px #3a3939b3;
    }
    .right-title span{
      font-size:20px;
      line-height: 60px;
      font-weight: 450;
      color:#fff;
      margin-left: 4%;
    }
    .right-content2{
      width: 74%;
      height: 550px;
      margin: 0 auto;
      margin-top: 18px;
    }
    .box{
      position: relative;
      padding-left: 14%;
    }
    .avatar-uploader{
      display: inline-block;
      position: absolute;
      top: 0;
      border: 1px dashed rgba(159, 142, 115, 0.56) !important;
      border-radius: 6px;
      margin-bottom: 20px;
    }
    .avatar-uploader .el-upload {
      cursor: pointer;
      overflow: hidden;
    }
    .avatar-uploader:hover {
      border-color: #8B4646 !important;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #9f8e73;
      width: 120px;
      height: 120px;
      line-height: 120px;
      text-align: center;
    }
    .avatar {
      width: 120px;
      height: 120px;
    }
    .el-form-item{
      margin-bottom: 14px;
    }
    .upload-demo{
      display: inline-block;
      margin-left: 44%;
      margin-bottom: 20px;
    }
    .el-upload-list__item.is-success .el-upload-list__item-name:focus, .el-upload-list__item.is-success .el-upload-list__item-name:hover{
        color: #9f8e73;
    }
    .el-upload-list__item:hover{
        background-color: rgba(252, 251, 250, 0.38824);
    }
    /* .demo-ruleForm{
      padding-left: 14%;
    } */
    .el-input{
      width: 100%;
    }
    .el-select{
      width: 69%;
    }
    .el-input__inner{
      height: 36px !important;
      line-height: 36px !important;
    }
    .el-select .el-input.is-focus .el-input__inner{
      border-color: #9f8e73 !important;
    }
    .el-input.is-active .el-input__inner, .el-input__inner:focus{
      border-color: #9f8e73 !important;
    }
    .el-radio__input.is-checked .el-radio__inner{
      border-color: #9f8e73;
      background: #9f8e73;
    }
    .el-radio__input.is-checked+.el-radio__label{
      color: #9f8e73;
    }
    .el-radio__inner:hover{
      border-color: #9f8e73;
    }
    .el-select-dropdown__item.selected{
      color: #9f8e73;
    }
    .button-group{
      padding-left: 15%;
    }
    /* 提交按钮 */
    .el-button--primary{
      border-color: #9f8e73;
      background: #9f8e73;
    }
    .el-button--primary.is-active, .el-button--primary:hover{
      border-color: #9f8e73;
      background: #9f8e73a6;
    }
    .el-button--primary.is-active, .el-button--primary:active{
      border-color: #9f8e73;
      background: #9f8e73;
    }
    .el-button--primary.is-active, .el-button--primary:focus{
      border-color: #9f8e73;
      background: #9f8e73;
    }
    /* 重置按钮 */
    .el-button:active{
      border-color: #9f8e73;
      color: #9f8e73;
    }
    .el-button--default:focus, .el-button--default:hover{
      border-color: #9f8e73;
      color: #9f8e73;
      background: rgba(202, 192, 171, 0.32);
    }
  </style>